import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import { getMapConfig, getMapShopList, getMapSightList } from '@/api/index'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'

export const useMapStore = defineStore('map', () => {
  const isMapLocationReady = ref(false) // 地图定位是否准备好
  const isMapShopListReady = ref(false) // 地图商家是否准备好
  const isMapSightListReady = ref(false) // 地图景点是否准备好
  const isMapReady = computed(() => isMapLocationReady.value && isMapShopListReady.value && isMapSightListReady.value) // 地图是否准备好
  // 地图经纬度数据
  const mapGroundOverlayUrl = ref('') // 手绘地图素材
  const location = ref({
    center: { latitude: 22.835832, longitude: 113.2486 },
    southwest: { latitude: 22.829741, longitude: 113.24101 },
    northeast: { latitude: 22.841278, longitude: 113.2589 },
  })
  const mapScale = ref({ scale: 15.8, min: 15.5, max: 18 }) // 地图缩放
  const mapShopList = ref([]) // 地图商家
  const currentShop = ref(null) // 当前选中的商家
  const isShowPopup = ref(false) // 是否显示商家导航弹窗
  const mapSightList = ref([]) // 地图景点

  // 获取地图数据
  async function onGetMapConfig() {
    const {
      result: {
        fileId,
        center: { lat: centerLat, lng: centerLng },
        southwest: { lat: southwestLat, lng: southwestLng },
        northeast: { lat: northeastLat, lng: northeastLng },
        zoom,
        minZoom,
        maxZoom,
      },
    } = await getMapConfig()

    location.value.center = { latitude: +centerLat, longitude: +centerLng }
    location.value.southwest = { latitude: +southwestLat, longitude: +southwestLng }
    location.value.northeast = { latitude: +northeastLat, longitude: +northeastLng }
    mapGroundOverlayUrl.value = fixCoverImageUrl(fileId)
    mapScale.value = { scale: +zoom, min: +minZoom, max: +maxZoom }
    isMapLocationReady.value = true
  }
  // 获取地图商家
  async function onGetMapShopList() {
    const { result } = await getMapShopList()

    mapShopList.value = result.map(item => ({
      ...item,
      cover: fixCoverImageUrl(item.cover),
      latitude: +item.latitude,
      longitude: +item.longitude,
      iconPath: item.mapIcon,
      width: 20,
      height: 20,
      callout: {
        content: item.name,
        display: 'ALWAYS',
        color: '#333',
        fontSize: 12,
        borderRadius: 4,
        bgColor: '#fff',
        padding: 4,
      },
    }))
    isMapShopListReady.value = true
  }
  // 设置当前选中的商家
  function setCurrentShop(shop) {
    currentShop.value = shop
  }
  // 获取地图景点
  async function onGetMapSightList() {
    const { result } = await getMapSightList()
    mapSightList.value = result.map(item => ({
      ...item,
      cover: fixCoverImageUrl(item.cover),
      latitude: +item.latitude,
      longitude: +item.longitude,
      iconPath: item.mapIcon,
      width: 20,
      height: 20,
      callout: {},
    }))
    isMapSightListReady.value = true
  }

  return {
    isMapReady,
    mapGroundOverlayUrl,
    location,
    mapScale,
    mapShopList,
    mapSightList,
    currentShop,
    isShowPopup,
    onGetMapConfig,
    onGetMapShopList,
    setCurrentShop,
    onGetMapSightList,
  }
})
